<!-- 首页：图表 -->
<template>
	<div class="home-chart-container">
		<v-chart class="chart" :option="option" autoresize />
	</div>
</template>
<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart, LineChart } from 'echarts/charts';
import {
	TitleComponent,
	GridComponent,
	ToolboxComponent,
	TooltipComponent,
	LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';

use([
	CanvasRenderer,
	BarChart,
	LineChart,
	TitleComponent,
	GridComponent,
	ToolboxComponent,
	TooltipComponent,
	LegendComponent,
]);

provide(THEME_KEY, 'light');

const option = ref({
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			crossStyle: {
				color: '#999',
			},
		},
	},
	toolbox: {
		feature: {
			dataView: { show: true, readOnly: false },
			magicType: { show: true, type: ['line', 'bar'] },
			restore: { show: true },
			saveAsImage: { show: true },
		},
	},
	legend: {
		data: ['Evaporation', 'Precipitation', 'Temperature'],
	},
	xAxis: [
		{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisPointer: {
				type: 'shadow',
			},
		},
	],
	yAxis: [
		{
			type: 'value',
			name: 'Precipitation',
			min: 0,
			max: 250,
			interval: 50,
			axisLabel: {
				formatter: '{value} ml',
			},
		},
		{
			type: 'value',
			name: 'Temperature',
			min: 0,
			max: 25,
			interval: 5,
			axisLabel: {
				formatter: '{value} °C',
			},
		},
	],
	series: [
		{
			name: 'Evaporation',
			type: 'bar',
			tooltip: {
				valueFormatter: function (value) {
					return value + ' ml';
				},
			},
			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
		},
		{
			name: 'Precipitation',
			type: 'bar',
			tooltip: {
				valueFormatter: function (value) {
					return value + ' ml';
				},
			},
			data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
		},
		{
			name: 'Temperature',
			type: 'line',
			yAxisIndex: 1,
			tooltip: {
				valueFormatter: function (value) {
					return value + ' °C';
				},
			},
			data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
		},
	],
});
</script>

<style lang="scss">
.home {
	&-chart-filters {
		padding: 15px 0;
	}
	&-chart-filter {
		margin-right: 20px;
	}
	&-chart-container {
		height: 360px;
		padding: 10px 0;
		.chart {
			height: 100%;
		}
	}
}
</style>
